<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/work/banner1.png" />
      <div class="banner-tx">
        <p class="ft48">CAREER！</p>
        <template v-if="lang === 'en'">
          <p>IF YOU WANT TO MAKE A DIFFERENCE,</p>
          <p>THE DOOR OF ZOETENG IS</p>
          <p>ALWAYS OPEN FOR YOU!</p>
        </template>
        <template v-else>
          <p>如果您想有所作为，</p>
          <p>硕腾的大门随时为您打开！</p>
        </template>
      </div>
    </div>
    <div class="main">
      <navbar></navbar>
      <img src="@/assets/images/work/team-bg1.png" class="mt-40" />
      <p class="m-content">{{ $t('work.team.contentA') }}</p>
      <div class="flex">
        <div class="img-box">
          <img src="@/assets/images/work/team-bg02.png" />
          <div class="position-1">{{ $t('work.team.contentB') }}</div>
          <p class="sub-content">{{ $t('work.team.contentC') }}</p>
        </div>
        <div class="fr">
          <div class="img-box">
            <img src="@/assets/images/work/team-bg3.png" />
            <div class="position-3">{{ $t('work.team.contentD') }}</div>
          </div>
          <div class="img-box">
            <img src="@/assets/images/work/team-bg4.png" />
            <div class="position-4">{{ $t('work.team.contentE') }}</div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="flex-1">
          <div class="row">
            <div class="img-box w-440">
              <img src="@/assets/images/work/team-bg5.png" />
              <div class="position-5">{{ $t('work.team.contentF') }}</div>
            </div>
            <div class="img-box">
              <img src="@/assets/images/work/team-bg6.png" />
              <div class="position-6">{{ $t('work.team.contentG') }}</div>
            </div>
          </div>
          <div class="row">
            <div class="img-box w-590">
              <img src="@/assets/images/work/team-bg7.png" />
              <div class="position-7">{{ $t('work.team.contentH') }}</div>
            </div>
            <div class="img-box">
              <img src="@/assets/images/work/team-bg8.png" />
              <div class="position-8">{{ $t('work.team.contentJ') }}</div>
            </div>
          </div>
        </div>
        <div class="logo"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Navbar from '../navbar'

export default {
  components: {
    Navbar,
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['lang']),
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  .banner {
    display: flex;
    position: relative;

    img {
      width: 100%;
    }

    .banner-tx {
      width: 100%;
      .pd(180, 0, 0, 360);
      .ft(36);

      position: absolute;
      font-weight: bold;
      color: #fff;

      .ft48 {
        .ft(48);

        color: #949596;
      }
    }
  }
}

.main {
  .width(1200);

  margin: 0 auto;

  .mt-40 {
    .mg(40, 0, 0, 0);

    width: 100%;
  }

  .m-content {
    .pd(30, 40, 30, 40);
    .lineH(24);
    .ft(16);

    text-align: justify;
  }

  .sub-content {
    .ft(16);
    .pd(16, 24, 16, 24);
    .lineH(20);

    background-color: #0762cb;
    text-align: justify;
    color: #fff;
  }

  .img-box {
    img {
      width: 100%;
      display: block;
    }

    .position-1 {
      .top(72);

      right: 0;
    }

    .position-3 {
      right: 0;
      .top(180);
    }

    .position-4 {
      left: 0;
      .top(180);
    }

    .position-5 {
      left: 0;
      .top(170);
    }

    .position-6 {
      right: 0;
      .top(170);
    }

    .position-7 {
      right: 0;
      .top(170);
    }

    .position-8 {
      left: 0;
      .top(150);
    }
  }

  .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 60px;

    .img-box {
      .width(595);

      position: relative;

      div {
        .height(40);
        .ft(24);
        .lineH(40);
        .pd(0, 24, 0, 24);

        font-weight: bold;
        color: #fff;
        position: absolute;
        letter-spacing: -2px;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }

    .fr {
      display: flex;
      flex-direction: column;

      .img-box {
        flex: 1;

        img {
          height: 100%;
        }
      }
    }

    .row {
      display: flex;
      .mg(0, 0, 10, 0);
    }

    .flex-1 {
      flex: 1;
      overflow: hidden;
    }

    .logo {
      .width(160);
      .height(456);

      background: #0762cb;
    }

    .w-440 {
      flex: 0 0 23vw;
      .mg(0, 10, 0, 0);
    }

    .w-590 {
      flex: 0 0 30.7vw;
      .mg(0, 10, 0, 0);
    }
  }
}
</style>
